<template>
  <div>
<el-form ref="form" :model="form"  label-width="80px">
  <h1 class="top">注册账号</h1>
  <el-upload
  ref="uploader"
  class="avatar-uploader"
  style="margin-left:48%;"
  :action="hosts+'api/File/Uploading'"
  :show-file-list="false"
  :auto-upload="false"
  :multiple="false"
  :on-progress="progress"
  :drag="true"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  :on-change="change"
  >
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  <el-form-item label="用户账号" prop="userNumber" :rules="[{ required: true, message: '请输入用户账号', trigger: 'blur' },
      {min: 5, max: 20, message: '用户账号至少五至二十位字符组成', trigger: 'change' }]">
    <el-input v-model="form.userNumber"></el-input>
  </el-form-item>
    <el-form-item label="用户名称" :rules="[{ required: true, message: '请输入用户名称', trigger: 'blur' },
      {min: 5, max: 20, message: '用户名称至少五至二十位字符组成', trigger: 'change' }]">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
      <el-form-item label="密码" prop="passWord" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
    <el-input v-model="form.passWord" show-password></el-input>
  </el-form-item>
        <el-form-item label="重复密码" prop="passWords"  :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
    <el-input v-model="form.passWords" show-password></el-input>
  </el-form-item>
  <el-form-item 
  style="margin-left:40%;">
    <el-button @click="()=>{$router.push({ path: '../Login/' });}">返回登录</el-button>
    <el-button type="primary" @click="onSubmit" :disabled="form.userNumber==''||form.name==''||form.passWord==''||imageUrl==''">注册并登陆</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import {host} from '../components/config/config'
import {post,get}from './util/request'
import {CreateUser,IsExist} from './config/User'
import {Register}from './config/Login'
import {encryptByDES} from './util/md5'
console.log(host);
 export default {
    data() {
      return {
        form: {
          userNumber:'',
          passWord:'',
          passWords:'',
          name: '',
          headPortrait:'',
          headPortraitKey:''
        },
        rules:{
        name: [
            { min: 5, message: '长度在5个字符以上', trigger: 'blur' }
          ],
        },
        hosts:host,
        imageUrl:''
      }
    },
    methods: {
      resetForm(form) {
        this.$refs[form].resetFields();
      },
      change(file){
        if(file.status=="ready"){
          this.imageUrl=URL.createObjectURL(file.raw);
        }
      },
      progress(event,file){
        console.log(event,file);
      },
      onSubmit() {
        if(this.imageUrl=='')return false
        var form=this.form;
        if(form.userNumber==''||form.userNumber.length<5){
          this.$message.warning("账号长度不能小于五位");
          return false
        }
        if(form.name==""){
          this.$message.warning("用户名称不能为空")
          return false
        }
        console.log(form.passWord.length);
        if(form.passWord==""||form.passWord.length<5){
          this.$message.warning("密码长度不能小于五位")
          return false
        }
        if(form.passWord!=form.passWords){
          this.$message.warning("俩次输入的密码不相等")
          return false
        }
        form.passWord=encryptByDES(form.passWord)
        form.passWords=form.passWord
        get(IsExist+'?userNumber='+form.userNumber)
          .then(response=>{
            if(response.statusCode===200){
              if(response.value==true){
                this.$message.warning("用户名已经存在请重新编辑")
                this.form.userNumber=''
                this.form.passWord=''
                this.form.passWords=''
                return;
              }
            }
          })
        this.$refs.uploader.submit();
      },
      handleAvatarSuccess(res){
        if(res.statusCode===200){
          console.log(res);
          this.form.headPortrait=res.value;
          post(CreateUser,this.form)
            .then(response=>{
              var form=this.form;
              var This=this;
              if(response.statusCode===200){
                this.$message.success("注册成功")
                setTimeout(function() {
                  get(Register,form)
                    .then(response=>{
                      if(response.statusCode===200){
                        sessionStorage.setItem("user",JSON.stringify(response.value.user));
                        sessionStorage.setItem("token",response.value.token);
                        This.$router.push({ path: '../Chat/' });
                      }else{
                        This.$router.push({ path: '../Login/' });
                      }
                    })
                }, 2000);
              }
            })
        }
      },
      beforeAvatarUpload(file){
        console.log(file);
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false
        }
      }
    }
  }
</script>

<style>
.top{
  margin-left: 50%;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 6 !important;
    text-align: center;
  }
  .avatar {
    display: block;
  }
  .el-upload-dragger {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 178px !important;
    height: 178px !important;
}
</style>